import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'index.dart';

class DiscoverIndexPage extends GetView<DiscoverIndexController> {
  const DiscoverIndexPage({super.key});

  // 主视图
  Widget _buildView() {
    return Column(
      children: [
        // 顶部标题区域
        _buildHeader(),
        
        // Tab切换
        _buildTabBar(),
        
        // 内容区域
        Expanded(
          child: Obx(() {
            return controller.currentTabIndex.value == 0
                ? _buildTaskHall()
                : _buildOrderHall();
          }),
        ),
      ],
    );
  }

  // 顶部标题区域
  Widget _buildHeader() {
    // 获取状态栏高度
    final statusBarHeight = MediaQuery.of(Get.context!).padding.top;
    
    return Container(
      width: double.infinity,
      padding: EdgeInsets.fromLTRB(16.w, statusBarHeight + 16.h, 16.w, 12.h),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            const Color(0xFFFFE4D6),
            const Color(0xFFFFF5ED),
          ],
        ),
      ),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '大厅中心',
                  style: TextStyle(
                    fontSize: 24.sp,
                    fontWeight: FontWeight.bold,
                    color: const Color(0xFF2C3E50),
                  ),
                ),
                SizedBox(height: 2.h),
                Text(
                  '接商单、做任务赚大钱',
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: const Color(0xFF95A5A6),
                  ),
                ),
              ],
            ),
          ),
          // 日历图标装饰
          Container(
            width: 60.w,
            height: 60.h,
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.3),
              borderRadius: BorderRadius.circular(30.r),
            ),
            child: Icon(
              Icons.calendar_today,
              size: 30.r,
              color: const Color(0xFFFF6B35),
            ),
          ),
        ],
      ),
    );
  }

  // Tab切换栏
  Widget _buildTabBar() {
    return Container(
      color: Colors.white,
      child: Row(
        children: [
          Expanded(
            child: _buildTab('任务大厅', 0),
          ),
          Expanded(
            child: _buildTab('接单大厅', 1),
          ),
        ],
      ),
    );
  }

  // 单个Tab
  Widget _buildTab(String title, int index) {
    return Obx(() {
      final isActive = controller.currentTabIndex.value == index;
      return GestureDetector(
        onTap: () => controller.switchTab(index),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 12.h),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: isActive ? const Color(0xFFFF6B35) : Colors.transparent,
                width: 2,
              ),
            ),
          ),
          child: Text(
            title,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
              color: isActive ? const Color(0xFF2C3E50) : const Color(0xFF95A5A6),
            ),
          ),
        ),
      );
    });
  }

  // 任务大厅
  Widget _buildTaskHall() {
    return Container(
      color: const Color(0xFFF5F5F5),
      child: ListView.builder(
        padding: EdgeInsets.all(12.r),
        itemCount: 10,
        itemBuilder: (context, index) {
          return _buildTaskCard(index);
        },
      ),
    );
  }

  // 任务卡片
  Widget _buildTaskCard(int index) {
    final taskData = {
      'userName': 'QSS-1015${4 - index}',
      'avatar': controller.getRandomAvatar(),
      'taskTitle': '测试${110 - index}啪哈哈哈',
      'createTime': '2025-11-06 15:28:41',
      'target': '1',
      'deadline': '2025-11-07 23:59:59',
      'completeDays': '1天',
      'taskCount': '10',
      'taskReward': '100',
      'adReward': '100',
      'requirement': '1',
    };

    return GestureDetector(
      onTap: () => controller.goToTaskDetail(taskData),
      child: Container(
        margin: EdgeInsets.only(bottom: 8.h),
        padding: EdgeInsets.all(12.r),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12.r),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 8.r,
              offset: Offset(0, 2.h),
            ),
          ],
        ),
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              // 头像 - 使用真实头像
              ClipOval(
                child: Image.network(
                  controller.getRandomAvatar(),
                  width: 44.w,
                  height: 44.h,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      width: 44.w,
                      height: 44.h,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.grey[300],
                      ),
                      child: Icon(
                        Icons.person,
                        color: Colors.grey,
                        size: 24.r,
                      ),
                    );
                  },
                ),
              ),
              SizedBox(width: 10.w),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'QSS-1015${4 - index}',
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.bold,
                        color: const Color(0xFF2C3E50),
                      ),
                    ),
                    SizedBox(height: 2.h),
                    Text(
                      '11.07 00:00',
                      style: TextStyle(
                        fontSize: 11.sp,
                        color: const Color(0xFF95A5A6),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          SizedBox(height: 8.h),
          Text(
            '测试${110 - index}啪哈哈哈',
            style: TextStyle(
              fontSize: 12.sp,
              color: const Color(0xFF34495E),
            ),
          ),
          SizedBox(height: 8.h),
          Row(
            children: [
              Container(
                padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.h),
                decoration: BoxDecoration(
                  color: const Color(0xFFFF6B35),
                  borderRadius: BorderRadius.circular(4.r),
                ),
                child: Text(
                  '任务类型',
                  style: TextStyle(
                    fontSize: 10.sp,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              SizedBox(width: 6.w),
              Text(
                '1200金币',
                style: TextStyle(
                  fontSize: 12.sp,
                  fontWeight: FontWeight.bold,
                  color: const Color(0xFFFF6B35),
                ),
              ),
            ],
          ),
        ],
      ),
      ),
    );
  }

  // 接单大厅
  Widget _buildOrderHall() {
    return Container(
      color: const Color(0xFFF5F5F5),
      child: Column(
        children: [
          // 筛选器
          _buildFilters(),
          
          // 接单列表
          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.all(12.r),
              itemCount: 10,
              itemBuilder: (context, index) {
                return _buildOrderCard(index);
              },
            ),
          ),
        ],
      ),
    );
  }

  // 筛选器
  Widget _buildFilters() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 10.h),
      child: Row(
        children: [
          _buildFilterButton('任务类型'),
          SizedBox(width: 8.w),
          _buildFilterButton('截止时间'),
          SizedBox(width: 8.w),
          _buildFilterButton('发布时间'),
        ],
      ),
    );
  }

  // 筛选按钮
  Widget _buildFilterButton(String text) {
    return Expanded(
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 6.h),
        decoration: BoxDecoration(
          color: const Color(0xFFF5F5F5),
          borderRadius: BorderRadius.circular(6.r),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              text,
              style: TextStyle(
                fontSize: 11.sp,
                color: const Color(0xFF34495E),
              ),
            ),
            SizedBox(width: 2.w),
            Icon(
              Icons.keyboard_arrow_down,
              size: 14.r,
              color: const Color(0xFF95A5A6),
            ),
          ],
        ),
      ),
    );
  }

  // 接单卡片
  Widget _buildOrderCard(int index) {
    final hasButton = index == 2; // 第三个显示按钮
    
    final taskData = {
      'userName': index == 0 ? '好的好的好' : index == 1 ? 'QSS-10145' : '王不慌',
      'avatar': controller.getRandomAvatar(),
      'taskTitle': index == 0 ? '测试商单全返回2' : index == 1 ? '测试1106广告单1' : '拉新',
      'createTime': '2025-11-06 15:28:41',
      'target': '1',
      'deadline': '2025-11-07 23:59:59',
      'completeDays': index == 0 ? '10h 30:47' : index == 1 ? '23天' : '6天',
      'taskCount': index == 0 ? '10/20 个' : index == 1 ? '60/200 个' : '190/200 个',
      'taskReward': '${index == 0 ? 100 : index == 1 ? 2000 : 1000}',
      'adReward': '${index == 0 ? 100 : index == 1 ? 1000 : 500}',
      'requirement': '1',
    };
    
    return GestureDetector(
      onTap: () => controller.goToTaskDetail(taskData),
      child: Container(
        margin: EdgeInsets.only(bottom: 8.h),
        padding: EdgeInsets.all(12.r),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12.r),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 8.r,
              offset: Offset(0, 2.h),
            ),
          ],
        ),
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              // 头像 - 使用真实头像
              ClipOval(
                child: Image.network(
                  controller.getRandomAvatar(),
                  width: 44.w,
                  height: 44.h,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      width: 44.w,
                      height: 44.h,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.grey[300],
                      ),
                      child: Icon(
                        Icons.person,
                        color: Colors.grey,
                        size: 24.r,
                      ),
                    );
                  },
                ),
              ),
              SizedBox(width: 10.w),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      index == 0 ? '好的好的好' : index == 1 ? 'QSS-10145' : '王不慌',
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.bold,
                        color: const Color(0xFF2C3E50),
                      ),
                    ),
                    SizedBox(height: 2.h),
                    Row(
                      children: [
                        Text(
                          index == 0 ? '10/20 个' : index == 1 ? '60/200 个' : '190/200 个',
                          style: TextStyle(
                            fontSize: 11.sp,
                            color: const Color(0xFFFF6B35),
                          ),
                        ),
                        SizedBox(width: 6.w),
                        Text(
                          index == 0 ? '10h 30:47' : index == 1 ? '23天' : '6天',
                          style: TextStyle(
                            fontSize: 11.sp,
                            color: const Color(0xFF95A5A6),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              if (hasButton)
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
                  decoration: BoxDecoration(
                    color: const Color(0xFFFF6B35),
                    borderRadius: BorderRadius.circular(16.r),
                  ),
                  child: Text(
                    '去组队',
                    style: TextStyle(
                      fontSize: 11.sp,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
            ],
          ),
          SizedBox(height: 8.h),
          Text(
            index == 0 ? '测试商单全返回2' : index == 1 ? '测试1106广告单1' : '拉新',
            style: TextStyle(
              fontSize: 12.sp,
              color: const Color(0xFF34495E),
            ),
          ),
          SizedBox(height: 8.h),
          Wrap(
            spacing: 6.w,
            runSpacing: 6.h,
            children: [
              _buildTag('任务类型', '${index == 0 ? 100 : index == 1 ? 2000 : 1000}金币', const Color(0xFFFF6B35)),
              _buildTag('广告运维师奖励', '${index == 0 ? 100 : index == 1 ? 1000 : 500}金币', const Color(0xFFFF8C69)),
            ],
          ),
        ],
      ),
      ),
    );
  }

  // 标签
  Widget _buildTag(String label, String value, Color color) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 3.h),
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(4.r),
          ),
          child: Text(
            label,
            style: TextStyle(
              fontSize: 10.sp,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        SizedBox(width: 4.w),
        Text(
          value,
          style: TextStyle(
            fontSize: 11.sp,
            fontWeight: FontWeight.bold,
            color: color,
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DiscoverIndexController>(
      init: DiscoverIndexController(),
      id: "discover_index",
      builder: (_) {
        return Scaffold(
          backgroundColor: const Color(0xFFF5F5F5),
          extendBodyBehindAppBar: true, // 让内容延伸到状态栏下方
          appBar: _buildAppBar(),
          body: _buildView(),
        );
      },
    );
  }
  
  // 构建AppBar - 完全透明，用于状态栏管理
  PreferredSizeWidget _buildAppBar() {
    return AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      toolbarHeight: 0, // 高度设为0，不占用空间
      systemOverlayStyle: const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark, // 深色图标（浅色背景）
        statusBarBrightness: Brightness.light,
      ),
    );
  }
}
